<template>
	<view class="header-wrap" >
		<image src="../static/left-back.png"  @click="back"></image>
		<view :class="navIndex === item.id ? 'act-header-item' : 'header-item'" v-for="item in navList" :key="item.id" @click="changeNav(item.id)">
			{{item.name}}
		</view>
	</view>
</template>

<script>
	export default {
		// name:"Header",
		data() {
			return {
				// 当前选中
				navIndex:   '1',
				// 导航列表
				navList: [
					{id:'1',name:'邀请好友'},
					{id:'2',name:'邀请记录'},
					{id:'3',name:'补绑邀请码'}
				],
				error: ''
			};
		},
		created() {
			this.navIndex = uni.getStorageSync('NAV_INDEX') || '1'
		},
		methods:{
			// 返回APP
			back(){
				// if (getApp().globalData.isIphone) {
				// 	return
				// }
				uni.showToast({
					title:getApp().globalData.isIphone + '',
					icon:'none'
				})
				//调用 APP方法关闭H5页面
				window.football.handlerEvents(10001,'');
			},
			changeNav(id){
				this.navIndex = id
				uni.setStorageSync('NAV_INDEX',id)
				this.$emit('getNavIndex',id)
			}
		}
	}
</script>

<style lang="less">
.header-wrap{
	display: flex;
	height: 120rpx;
	line-height: 120rpx;
	background-color: rgba(254, 15, 57, 1);
	width: 750rpx;
	position: absolute;
	top: 0;
	left: 0;
	image{
		height: 30px;
		width: 30px;
		margin-top: 30rpx;
		// margin-top: 0.9rem;
	}
	.header-item,.act-header-item{
		flex: 1;
		text-align: center;
	}
	.header-item{
		font-size: 32rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #FFFFFF;
		opacity: 0.8;
	}
	.act-header-item{
		font-size: 36rpx;
		font-family: PingFang SC;
		font-weight: bold;
		color: #FFFFFF;
	}
}

</style>
